<div class="layers-panel-wrapper" [ngStyle]="{'display':state?'block':'none','width': width + 'px'}">
    <div class="drawer-body" nz-resizable nzBounds="window" [nzMinWidth]="460" [nzMaxWidth]="1200"
         (nzResize)="onResize($event)">
        <nz-resize-handles [nzDirections]="['left']"></nz-resize-handles>
        <div class="layers-panel-header">
            <i *ngIf="title!=='图层面板'" nz-icon nzType="left" nzTheme="outline" (click)="open('图层面板')" style="font-size: 16px;
                margin-right: 0;"></i>
            {{title}}
            <i nz-icon title="属性面板" nzType="unordered-list" nzTheme="outline" (click)="open('属性面板')"
               style="margin-left: 12px"></i>
            <i nz-icon title="图形编辑面板" nzType="form" nzTheme="outline" routerLink="/home/not-developed"></i>
            <i nz-icon title="地图符号化面板" iconfont="iconyanse" (click)="open('地图符号化')"></i>
            <div class="close" (click)="close()">x</div>
        </div>

        <div class="layers-panel-body">
            <div class="wrapper" [ngStyle]="{'display':title==='图层面板'?'block':'none'}" style="max-width: 400px">
                <kylin-layers [map]="map" (selectLayerChange)="selectLayerChange($event)"></kylin-layers>
            </div>
            <div class="wrapper" [ngStyle]="{'display':title==='属性面板'?'block':'none'}">
                <kylin-features-panel *ngIf="title==='属性面板'" [map]="map" [layer]="layer"></kylin-features-panel>
            </div>
            <div class="wrapper" [ngStyle]="{'display':title==='地图符号化'?'block':'none'}">
                <kylin-map-symbolization *ngIf="title==='地图符号化'" [map]="map"
                                         [layerInfo]="layer"></kylin-map-symbolization>
            </div>
        </div>
    </div>
</div>
